<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=divice-width, initial-scale=1.0">
        <title>登录界面</title>
        <style type="text/css">
            html{
                height: 100%;
                width: 100%;
            }
            body{
                height: 100%;
                width: 100%;
                margin: 0; 
                color:rgb(122, 120, 120);
            }
            .left-part{
                display: inline;
                float: left;
            }
            .right-part{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                align-items: center;
                font-family: 微软雅黑;
            }
            .login-template-words{
                text-align: center;
                color:rgb(87, 85, 85);
                margin-top: 50px;
                font-size: 28px;
                color:rgb(88, 91, 94);
            }
            .button{        /*登录和SSO一键登录按钮的通用样式*/
                width: 150px;
                height: 30px;
                text-align: center;
                color: white;
                margin-top: 25px;
                margin-bottom: 24px;
            }
            .login-button{
                border: 1px solid rgb(43, 151, 201);
                background-color: rgb(43, 151, 201);
            }
            .SSO-login-button{
                border: 1px solid rgb(88, 91, 94);
                background-color: rgb(88, 91, 94);
            }

            .input-field-container{     
                display: flex;
                width: 230px;
                height: 30px;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
            }
            .input-field{       /* 输入框通用样式 */  
                border:none; 
                border-bottom:1px solid #eee;
                height: 21px;
                width: 220px;
                line-height: 50px;
            }
            #phone-prefix{
                width: 25%;
                border-right: 1px solid #eee;
            }
            #input-phone-number{
                width: 75%;
            }
            .input-verification-code{
                width: 72%;
            }
            .send-verification-code-button{
                width: 28%;
                height: 25px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                background-color: orange;
                color: white;
                padding: 4px 8px;
                border-radius: 999em;
                border: 1px solid orange;
                font-size: 9px;
            }

            #tab {
                width:280px;
                padding:5px;
                height:120px;
                margin-bottom:50px;
            }
            /* 账号登录和手机登录中间的竖线 */
            #middle-line{   
                border-left: 1px solid #eee;
            }
            #tab ul{
                height: 35px;
                line-height: 27px;
                font-size: 15px;
            }
            #tab ul li {
                background:#FFF;
                cursor:pointer;
                float:left;
                list-style:none;
                padding:0px 10px;
            }
            #tab ul li.on {
                border-bottom:2px solid rgb(40, 171, 204);
                color: rgb(40, 171, 204);
            }
            #hide {
                display:none;
            }   

            #other-login-divider{
                display: flex;
                width: 50%;
                justify-content: space-around;
                align-items: center;
            }
            .dividing-line{
                border: 0.4px solid #eee;
                width: 25%;
                height: 0;
            }
            .other-login-type-words{
                font-size: 10.5px;
                color: gray;
            }

            .copyright{
                position: fixed;
                bottom: 20px;
                left: 67%;
                font-size: 10px;
                text-align: center;
            }

            #tip-phone-number{
                color: red;
                font-size: 11px;
                text-align: center;
            }

        </style>

    </head>

    <body>
        <img class="left-part" alt="登录图片" src="picture.png" width="55%" height="100%">
        <div class="right-part">
            <div>
                <p class="login-template-words">登陆模板</p>
            </div>

            <div id="tab">
                <ul class="tab-title-bar">
                    <li class="off" onclick="changeTab();">账号登录</li>
                    <li class="on" id="middle-line" onclick="changeTab();">手机登录</li>
                </ul>

                <!-- 账号登陆部分 -->
                <div class="tab-page" id="hide">
                    <div class="input-field-container">
                        <input class="input-field" type="text" placeholder="输入账号">
                    </div>
                    <div class="input-field-container">
                        <input class="input-field" type="text" placeholder="输入密码">
                    </div>
                </div>

                <!-- 手机登录部分 -->
                <div class="tab-page" id="show">   
                    <div class="input-field-container">
                        <select class="input-field" id="phone-prefix">
                            <option value="中国大陆" selected>+86</option>
                            <option value="中国香港">+852</option>
                            <option value="中国澳门">+853</option>
                        </select>
                        <input class="input-field" id="input-phone-number" type="text" placeholder="输入手机号" maxlength="11" onblur="checkPhoneNumber();" />
                    </div>

                    <!-- 用于显示验证手机号的相关提示信息 -->
                    <div id="tip-phone-number"></div> 

                    <div class="input-field-container">
                        <input class="input-field input-verification-code" type="text" placeholder="输入手机验证码">
                        <button class="send-verification-code-button">发送验证码</button>
                    </div>
                </div>
            </div>
       
            <div>
                <button class="button login-button" type="submit">登 录</button>
            </div>
            <div id="other-login-divider">
                <div class="dividing-line"></div>
                <div class="other-login-type-words">其他登录方式</div>
                <div class="dividing-line"></div>
            </div>
            <div>
                <button class="button SSO-login-button" type="submit">SSO一键登录</button>
            </div>

            <div class="copyright">
                <p>Copyright © 2015-2019 Baishancloud. All rights reserved.</p>
            </div>
        </div>

        <script  type="text/javascript">
            function checkPhoneNumber(){
                let phone = document.getElementById('input-phone-number').value;
                console.log(phone);
                let tip = '';
                let legalExpression = /^1[3|4|5|7|8][0-9]\d{8}$/;
                if(legalExpression.test(phone) == false){
                    tip = '手机号码无效!';
                    document.getElementById('input-phone-number').value = "";   //将输入框中的字符清空
                    document.getElementById('input-phone-number').focus();      //光标定位到手机号输入框
                }
                return (document.getElementById('tip-phone-number').innerHTML = tip);
            }

            function changeTab(){
                let myLi = document.getElementsByTagName("li");
                for(let i = 0; i < myLi.length; i++){
                    if(myLi[i].className == "off"){
                        myLi[i].className = "on";
                    }
                    else{
                        myLi[i].className = "off";
                    }
                }
                let page = document.getElementsByClassName("tab-page");
                for(let j = 0; j < page.length; j++)
                {
                    if(page[j].id == "hide"){
                        page[j].id = "show";
                    }
                    else{
                        page[j].id = "hide";
                    }
                }
            }
        </script>
    </body>
</html>
